<!-- picker子组件 -->
<template>
	<view>
		<view class="picker-modal" v-if="showPicker" @click="showPickerChange"></view>
		<view class="picker-content" :style="{transform:  showPicker ? 'translateY(0)' : 'translateY(100%)'}">
				<view class="picker-header">
					<view :style="{color: cancelColor, fontSize: cancleFontSize}" v-if="cancelType=='text'"  @click="_close">取消</view>
					<text  v-else @click="_close" style="font-size: 30rpx;color:#A2A3B2">取消</text>
					 <!-- <icon type="clear" size="18"/> -->
					 <view class="packer-title" :style="{color:titleColor, fontSize:titleFontSize}">{{title}}</view>
					<view :style="{color: confirmColor, fontSize: confirmFontSize, fontWeight:confirmFontWeight}" @click="__confirmPicker" >
						<text style="font-size: 30rpx;">确定</text>
					</view>
				</view>
				<picker-view indicator-style="height: 90rpx;" class="picker-view" :value="pickerValue" @change="changePicker">
					<picker-view-column>
						<view class="picker-item" :style="{fontSize:itemFontSize}"  v-for="(item, index) in pickerList" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>
			</view>
	</view>
</template>
 
<script>
	export default{
		props:{
			cancelColor: {   // 取消按钮颜色
				type: String,
				default: '#808080' 
			},
			cancelType: {      // text显示文字，icon显示图片
				type: String,
				default: 'text' 
			},
			cancleFontSize:{  //取消文字大小
				type:String,
				default:'28rpx'
			},
			title: {        //标题文字
				type: String,
				default: ""
			},
			titleColor: {   //标题文字颜色
				type: String,
				default: ""
			},
			titleFontSize:{ //标题文字大小
				type:String,
				default:'26rpx'
			},
			confirmColor:{ // 确定按钮颜色
				type:String,
				default:''
			},
			confirmFontSize:{ //确定文字大小
				type:String,
				default:'28rpx'
			},
			confirmFontWeight: { //确定按钮的字体粗细
				type: String,
				default: '' 
			},
			itemFontSize:{ //选项文字大小
				type:String,
				default:'28rpx'
			},
			pickerList: { //数据
				type: Array
			}
		}, 
		data(){
			return{
				showPicker: false,
				pickerValue: [0],
			}
		},
		methods:{
			_close(){
				this.$emit('onClose') 
				this.showPicker = false
				
			},
			_open(){
				this.showPicker = true
			},
			
			//确定
			__confirmPicker(){
				  this.showPicker = false
					let checkedValue =  this.pickerList[this.pickerValue].label
					this.$emit('onConfirm',checkedValue) 
			},
			//滑动picker
			changePicker(e) {
				this.pickerValue = e.detail.value
			},
		}
	}
</script>

<style>
	.picker-modal{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.picker-content{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #fff;
		transition: all .3s;
	}
	.picker-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:0 20rpx;
		padding: 20rpx 0;
	}
	.packer-title{
		text-align: center;
		font-size: 30rpx;
	}
	.picker-view {
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		height: 490rpx;
		background-color: rgba(255, 255, 255, 1);
	}
	.picker-item {
		text-align: center;
		line-height: 70rpx;
		text-overflow: ellipsis;
	}
</style>
